<template>
  <canvas
    class="f2-canvas"
    :canvas-id="canvasId"
    @init="init"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
  ></canvas>
</template>

<script>
import Renderer from "./lib/renderer";
import F2 from "./lib/f2";
let ctx;
// override
F2.Util.measureText = function (text, font) {
  ctx.font = font || "12px sans-serif";
  return ctx.measureText(text);
};

F2.Util.addEventListener = function (source, type, listener) {
  console.log(source, "?sour");
  source.addListener && source.addListener(type, listener);
};

F2.Util.removeEventListener = function (source, type, listener) {
  source.removeListener && source.removeListener(type, listener);
};

F2.Util.createEvent = function (event = {}, chart) {
  console.log(event, "?");
  const type = event.type;
  let x = 0;
  let y = 0;
  const touches = event.touches;
  if (touches && touches.length > 0) {
    x = touches[0].x;
    y = touches[0].y;
  }

  return {
    type,
    chart,
    x,
    y,
  };
};
export default {
  // f2-canvas.js

  /**
   * 组件的属性列表
   */
  props: {
    canvasId: {
      type: String,
      default: "f2-canvas",
    },

    opts: {
      type: Object,
      default() {
        return {};
      },
    },
  },

  /**
   * 组件的初始数据
   */
  data() {
    return {};
  },

  mounted: function () {
    if (!this.opts) {
      console.warn(
        '组件需绑定 opts 变量，例：<ff-canvas id="mychart-dom-bar" ' +
          'canvas-id="mychart-bar" opts="{{ opts }}"></ff-canvas>'
      );
      return;
    }

    if (!this.opts.lazyLoad) {
      this.init();
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init: function (callback) {
      // #ifdef H5
      const version = "2.2.22";
      // #endif
      // #ifndef H5
      let version = (uni.version ? uni.version.version || "2.2.22" : "2.2.22")
        .split(".")
        .map((n) => parseInt(n, 10));
      // #endif
      const isValid =
        version[0] > 1 ||
        (version[0] === 1 && version[1] > 9) ||
        (version[0] === 1 && version[1] === 9 && version[2] >= 91);
      if (!isValid) {
        console.error("微信基础库版本过低，需大于等于 1.9.91。");
        return;
      }

      ctx = uni.createCanvasContext(this.canvasId, this); // 获取小程序上下文
      const canvas = new Renderer(ctx);
      this.canvas = canvas;

      const query = uni.createSelectorQuery().in(this);
      query
        .select(".f2-canvas")
        .boundingClientRect((res) => {
          console.log(callback, "??callback");
          if (typeof callback === "function") {
            this.chart = callback(canvas, res.width, res.height);
          } else if (this.opts && this.opts.onInit) {
            this.chart = this.opts.onInit(canvas, res.width, res.height);
          }
          this.$emit("finish");
        })
        .exec();
    },
    touchStart(e) {
      if (this.canvas) {
        this.canvas.emitEvent("touchstart", [e]);
      }
    },
    touchMove(e) {
      if (this.canvas) {
        this.canvas.emitEvent("touchmove", [e]);
      }
    },
    touchEnd(e) {
      if (this.canvas) {
        this.canvas.emitEvent("touchend", [e]);
      }
    },
  },
};
</script>

<style>
/* f2-canvas.wxss */
.f2-canvas {
  width: 100%;
  height: 100%;
}
</style>